<template>
  <div
    class="game-container"
    @click.self="handleClickCloseSetting"
    :style="{
      height: '700px',
      'padding-top': infoStore.isMobile ? '190px' : '120px',
    }"
  >
    <!--
    .stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
    .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
    .self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
    .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
    .once 是将事件设置为只执行一次,如: .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
    .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个
    .passive 修饰符尤其能够提升移动端的性能。
    -->
    <Login />
    <InfoArea />
    <Setting />
    <CardPool :myCards="myCards" />
    <GameArea
      :size="infoStore.size"
      :cardSize="isMobile() ? infoStore.cardSize2 : infoStore.cardSize"
      :cardNum="infoStore.cardNum"
      :isAutoAddCard="infoStore.isAutoAddCard"
      :duration="infoStore.duration"
    />
    <Command :isShowCmd="cardStore.isShowCmd" />
    <CardSlot
      :cardSize="isMobile() ? infoStore.cardSize2 : infoStore.cardSize"
      :maxNum="infoStore.slotMaxNum"
      :clearCard="infoStore.clearCard"
    />
  </div>
</template>

<script>
import Login from "@/components/Login";
import InfoArea from "@/components/InfoArea";
import Setting from "@/components/Setting";
import CardPool from "@/components/CardPool";
import GameArea from "@/components/GameArea";
import Command from "@/components/Command";
import CardSlot from "@/components/CardSlot";
import isMobile from "@/utils/isMobile";
import closeTips from "@/utils/closeTips";
import levelData from "@/store/levelData";
import getMaxArr from "@/utils/getMaxArr";
import { getVersion } from "@/api/getVersion";
import { getUsers, setUsers } from "@/api/user";
import { getRanking, setRanking } from "@/api/ranking";

export default {
  components: {
    Login,
    InfoArea,
    Setting,
    CardPool,
    GameArea,
    Command,
    CardSlot,
  },
  data() {
    return {
      infoStore: this.$store.state.info,
      cardStore: this.$store.state.cards,
      requStore: this.$store.state.requestData,
      versions: this.$store.state.versions,
      i: 0, // 测试用
    };
  },
  computed: {
    // 我的卡片, 放在计算属性里是为了让cardPool组件读取时都读到最新的数据, 能及时更新组件
    myCards() {
      return this.$store.state.cards.myCards;
    },
  },
  created() {
    this.$store.commit("info/setCardTypes", this.infoStore.cardTypes.length); // 随机选择图标类型
    this.$store.commit(
      "info/setCardTypeTotal",
      this.$store.state.cards.cardData.length
    ); // 更新卡片总数 [以cards中的为准]
    this.$store.commit("info/setIsMobile", this.isMobile()); // 是否为移动端

    // 日期改变则重置关卡
    this.$store.commit("cards/updateLevel"); // 读取上次登录的时间, 并根据日期是否改变来更新关卡
    this.$store.commit("cards/putTime"); // 写入当前时间至本地

    // 从本地导入卡片
    // this.$store.commit("cards/addMycards", 13); // 添加一张13号卡片 [测试]
    // this.$store.commit("cards/putCards"); // 保存当前仓库卡片数据至本地 [测试, 可直接从初始仓库获取全部卡片]
    this.$store.commit("cards/getCards"); // 读取本地的卡片

    // 从本地导入关卡进度
    // this.$store.commit("cards/putLevel"); // 保存仓库的关卡进度至本地
    this.$store.commit("cards/getLevel"); // 读取本地的关卡进度

    // this.$store.commit("cards/setLevelNum", 10); // 设置关卡 [测试]
  },
  async mounted() {
    let newVersion;
    let msg = ""; // 错误信息
    try {
      const resp = await getVersion(); // 从cos中获取最新版本号 [get 版本号]
      if (resp.status === 200 || resp.status === 304) {
        newVersion = resp.data;
      } else {
        msg = "系统错误, 无法获取最新版本号";
      }
    } catch (err) {
      msg = "连接网络后才可检测版本更新呢";
    }
    try {
      const resp = await getRanking(); // 从cos中获取排行数据 [get 排行]
      if (resp.status === 200 || resp.status === 304) {
        const ranking = resp.data;
        localStorage.setItem("CheckBlockRanking", JSON.stringify(ranking)); // 存储排行数据到本地
        this.$store.commit("requestData/setRanking", ranking); // 存储排行数据到仓库
        const newRankingMax = {};
        for (let i = 0; i < levelData.length; i++) {
          const item = ranking[i + 1];
          // console.log(i, item);
          let max;
          if (item.length > 0) {
            max = item[item.length - 1][1];
          }
          if (item.length >= 30) {
            // 如果排行榜已经超过30位
            newRankingMax[i + 1] = max < (i + 1) * 60 ? max : (i + 1) * 60;
          } else {
            // 排行榜未满
            newRankingMax[i + 1] = (i + 1) * 60;
            if (i + 1 === 7) {
              newRankingMax[i + 1] += 120;
            }
          }
        }
        this.$store.commit("requestData/setRankingMax", newRankingMax); // 记录排行榜每关的最大上榜秒数
      } else {
        msg = "系统错误, 无法获取排行榜数据";
      }
    } catch (err) {
      // msg = "连接网络后才可更新排行榜呢";
    }
    if (msg) {
      // 如果有错误信息
      // 读取本地的排行信息
      const rankingJson = localStorage.getItem("CheckBlockRanking");
      rankingJson &&
        this.$store.commit("requestData/setRanking", JSON.parse(rankingJson));
      console.log(msg);
      // 显示一个弹窗
      this.$message({
        showClose: true, // 是否显示关闭按钮
        message: msg, // 内容
        duration: 3000, // 显示时间
        type: "error", // 弹窗类型
        offset: this.infoStore.popOffset, // 距离顶部距离 [当前为自适应]
      });
    } else {
      // 请求时没有报错
      // 比对本地版本, 判断是否要更新
      const versions2 = this.versions.versions2;
      if (
        newVersion &&
        newVersion.version !==
          versions2[versions2.length - 1].title.slice(
            3,
            versions2[versions2.length - 1].length
          )
      ) {
        this.$message({
          showClose: true,
          message: "有可更新版本! 请到最右侧'信息'按钮中下载最新版",
          type: "warning",
          duration: 8000,
          offset: this.infoStore.popOffset,
        });
      }
    }

    // const newRanking = await getRanking(); // 从cos中获取关卡排名
    // 上传的用户对象
    // const usersData = [
    //   {
    //     userName: "零泠丶",
    //     pwd: "xxxx",
    //     cards: "srazbacbdcedfegfhgihjikjlkmlnmonpoqprq",
    //   },
    //   {
    //     userName: "羊了个羊",
    //     pwd: "xxxx",
    //     cards: "cbbaazdccbedihgffehgjikjlkmlnmonpoqprq",
    //   },
    // ];
    // const ranking = {
    //   1: [["零泠丶", 23, 234], ["羊了个羊", 34, 64]],
    //   2: [],
    //   3: [],
    //   4: [],
    //   5: [],
    //   6: [],
    //   7: [],
    //   8: [],
    //   9: [],
    //   10: [],
    // };
    // const resp = await setRanking(ranking);
    // JSON.stringify(); // 转为json
    // try {
    // const resp = await setUsers(usersData); // 发出put请求
    // } catch (err) {
    //   alert("更新失败");
    // }

    // this.$consolelog(newVersion); // 手机端测试请求时使用
    // if (newVersion) {
    //   this.$consolelog("status:", newVersion.status);
    //   this.$consolelog("data:", newVersion.data);
    //   this.$consolelog("headers:", newVersion.headers);
    //   this.$consolelog("request:", newVersion.request);
    // }
  },
  methods: {
    isMobile,
    // 点击后关闭设置窗口和卡片池窗口
    handleClickCloseSetting() {
      // this.i++; // 测试
      // this.$store.commit("cards/addMycards", this.i); // 添加一张12号卡片 [测试]
      // this.$store.commit("info/setIsShowSetting", false);
      this.$bus.$emit("clickSetting", false);
      this.$bus.$emit("clickCardPool", true);
      closeTips();
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/styles/var.less";
.game-container {
  position: relative;
  width: 600px;
  background: @bg;
  margin: 0 auto;
  margin-top: 10px;
  padding: 40px 0;
  border-radius: 20px;
  box-sizing: border-box;
}
</style>
